<template>
  <div class="home">
    <!-- 轮播 -->
    <div class="banner">
      <el-carousel height="300px" :autoplay="false" class="user-profile">
        <el-carousel-item v-for="item in bannerList" :key="item">
          <img :src="item" />
          <div class="user-profile-title">
            <h2>邙星魂 Java 开发博客</h2>
            <p>这是一个 Java 系统开发的技术分享栈，如果需要，请入住分享</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 左侧 帖子 -->
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <el-card
          class="box-card article-card"
          v-for="item of articleContentList"
          :key="item.id"
        >
          <div class="title" @click="showArticleDetailHandler(item.id)">
            <span>{{ item.title }}</span>
          </div>
          <div class="user">
            <span><i class="el-icon-user-solid"></i>{{ item.author }}</span>
            <span><i class="el-icon-timer"></i>{{ item.date }}</span>
            <span><i class="el-icon-price-tag"></i>{{ item.label }}</span>
          </div>
        </el-card>
        <!-- 分页 -->
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000"
            @current-change="currentChangeHandler"
          />
        </div>
      </el-col>
      <!-- 右侧导航 -->
      <el-col :span="4">
        <el-card class="box-card">
          <div class="header">
            <div><img src="../assets/header.webp" /></div>
            <div class="name">邙星魂</div>
            <div class="info">
              <el-row type="flex" justify="center">
                <el-col :span="8" class="info-left">
                  <div class="count">28</div>
                  <div class="desc">Article</div>
                </el-col>
                <el-col :span="4">
                  <div class="count">38</div>
                  <div class="desc">Tag</div>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 分类 -->
          <div class="body">
            <div class="body-title">
              <i class="el-icon-s-operation"></i>Category
            </div>
            <div class="body-content">
              <div
                class="body-card"
                v-for="item of categoryContentList"
                :key="item.id"
              >
                <el-row type="flex" justify="space-between">
                  <el-col :span="12">
                    <div class="category">{{ item.title }}</div>
                  </el-col>
                  <el-col :span="1">
                    <div
                      class="count"
                      :style="{ backgroundColor: randColor() }"
                    >
                      {{ item.count }}
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 标签 -->
          <div class="tag">
            <div class="tag-title"><i class="el-icon-price-tag"></i>Tag</div>
            <div class="tag-content">
              <el-tag
                :style="{ backgroundColor: randColor() }"
                v-for="item of tagContentList"
                :key="item.id"
              >
                {{ item.tag }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <blog-bottom-component />
  </div>
</template>

<script>
import BlogBottomComponent from "../components/BlogBottomComponent.vue";
export default {
  name: "Home",
  data() {
    return {
      options: {},
      articleContentList: [], // 博客内容列表
      categoryContentList: [], // 博客分类列表
      tagContentList: [], // 搜索标签
      bannerList: [
        "banner/1.jpg",
        // "banner/2.jpg",
        // "banner/3.jpg",
        // "banner/4.jpg",
      ], // 走马灯图片
    };
  },
  components: {
    BlogBottomComponent,
  },
  methods: {
    loadArticleContent() {
      fetch("/article-content.json")
        .then((resp) => resp.json())
        .then((data) => {
          this.articleContentList = data;
        });
    },
    loadCategoryContent() {
      fetch("/category-content.json")
        .then((resp) => resp.json())
        .then((data) => {
          this.categoryContentList = data;
        });
    },
    loadTagContent() {
      fetch("/tag-content.json")
        .then((resp) => resp.json())
        .then((data) => {
          this.tagContentList = data;
        });
    },
    randColor() {
      return (
        "rgb(" +
        Math.floor(Math.random() * 255) +
        "," +
        Math.floor(Math.random() * 255) +
        "," +
        Math.floor(Math.random() * 255) +
        ")"
      );
    },
    showArticleDetailHandler(titleId) {
      this.$message.success(`查询编号【${titleId}】的帖子显示`);
      this.$router.push(`/articleDetail/${titleId}`);
    },
    currentChangeHandler(val) {
      this.$message(`你点击了第${val}页`);
    },
  },
  mounted() {
    this.loadArticleContent();
    this.loadCategoryContent();
    this.loadTagContent();
  },
};
</script>
<style scoped>
.home {
  font-family: "Helvetica Neue", "Microsoft YaHei", "微软雅黑";
  min-height: 100%;
  height: auto !important;
  position: relative;
  padding-bottom: 72px;
}
.banner {
  height: 300px;
}
.user-profile {
  position: relative;
}
.user-profile-title {
  position: absolute;
  top: 60px;
  left: 80px;
}
.user-profile-title h2 {
  color: #409eff;
  font-weight: bold;
}
.user-profile-title p {
  color: #999;
}
.box-card {
  margin-top: 20px;
  cursor: pointer;
}
.box-card:hover {
  box-shadow: 3px 3px 10px 1px #ccc;
}
.article-card {
  padding-left: 20px;
}
.title span {
  position: relative;
  padding-bottom: 20px;
}

.title span:hover {
  color: #409eff;
}
.title span::after {
  content: "";
  width: 0;
  height: 2px;
  background-color: #409eff;
  position: absolute;
  top: 100%;
  left: 50%;
  transition: all 0.7s;
}
.title span:hover::after {
  left: 0;
  width: 100%;
}

.el-col {
  margin-right: 15px;
}
.title {
  font-size: 20px;
  margin-bottom: 15px;
}
.title span {
  padding-bottom: 6px;
}
.user span {
  margin-right: 20px;
  color: #999;
}
.user span i {
  margin-right: 5px;
}

.header {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.header img {
  width: 120px;
  height: 120px;
  border-radius: 120px;
}
.header .name {
  margin: 10px 0;
}
.header .count {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.desc {
  font-size: 11px;
}
.info-left {
  border-right: 1px solid #ccc;
}

.body-title {
  color: black;
}
.body-title i {
  margin-right: 5px;
}
.body-content {
  margin-top: 25px;
}
.body-card {
  padding: 12px 20px;
  box-shadow: 0 2px 10px 1px #ccc;
  margin: 10px 0px;
  border-radius: 5px;
}
.body-card:hover {
  transform: scale(1.02);
  color: #409eff;
  font-weight: bold;
}
.body-card .category {
  font-size: 14px;
}
.body-card .count {
  font-size: 11px;
  font-weight: bold;
  color: white;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 3px;
  text-align: center;
  background-color: burlywood;
}

.tag-content {
  margin-top: 20px;
}

.tag-content .el-tag {
  margin: 5px;
  font-size: 10px;
  color: white;
  height: 25px;
  line-height: 25px;
  border: 0;
}
.tag-content .el-tag:hover {
  transform: scale(1.1);
  transition: all 0.6s;
}

.page {
  margin: 30px;
  display: flex;
  justify-content: center;
}
</style>
